<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Ariel Penciaroli Web</title>
    <meta name="description" content="Artículo en GenbetaDev sobre Bootstrap 2.0"/>
    <meta name="author" content="Ricardo Borillo"/>
    <!--[if lt IE 9]-->
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <!--[endif]-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link href="./css/estilo.css" rel="stylesheet"/>
  </head>
  <body>
	
    <div class="generico" >
	<img class="img-teclado" src="./images/slide-2.jpg" alt="tecladoimg"/>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Ariel Penciaroli</a>
          <ul class="nav">
            <li><a href="#about">About</a></li>
            <li><a href="#conocimientos">Conocimientos</a></li>
	    <li><a href="#proyectos">Portfolio</a></li>
            <li><a href="#contact">Contacto</a></li>
          </ul>
        </div>
      </div>
	
    </div>
	
    <div class="hero-unit" id="about">
      <h3>Sobre mi:</h3>
      <p>
      Mi nombre es Ariel Penciaroli, soy un programador web que vive en Rosario, Argentina.
      <div style="clear:both;"></div>
      Cursando la carrera Analista Universitario en Sistemas y apasionado por la tecnología y el desarrollo web.
      
      </p>
      <p>
	<a href="http://www.linkedin.com/in/arielpenciaroli"><img src="./images/linkedin.png" /></a>
	<!--a class="btn btn-primary btn-large" href="http://www.linkedin.com/pub/ariel-penciaroli/5a/177/9a6">Más información</a-->
	<a class="btn btn-info btn-large" href="./cv/cv-arielpenciaroli.pdf"><i class="icon-arrow-down"></i>Descargar CV</a>

	</p>
    </div>
    <!-- Separador -->
    <div class="hero-unit" id="conocimientos">

      <div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
		
    <li class="active"><a href="#tab1" data-toggle="tab">Herramientas</a></li>
    <li ><a href="#tab2" data-toggle="tab">Frameworks</a></li>
  </ul>
  <div class="tab-content">

    <div class="tab-pane active" id="tab1">
      <ul class="menu-herramientas">
        <li>HTML</li>
        <li>HTML 5</li>
        <li>XHTML</li>
        <li>CSS</li>
        <li>CSS 3</li>
        <li>JavaScript</li>
        
        
      </ul>
    </div>
	
    <div class="tab-pane" id="tab2">
      <ul class="menu-framworks">
        <li><a href="http://jquery.com/"><img class="logo" src="./images/jquery.jpg" alt="jquery" width="120px" /></a>
        </li>
        <li><a href="http://jqueryui.com/"><img class="logo" src="./images/jqueryui.jpg" alt="jquery" width="110px" /></a></li>
      </ul>
    </div>
	
  </div>
		 
</div>

    </div>
    <!---Separador-->
    <div class="hero-unit" id="proyectos">
   <h2>Portfolio</h2>
          
          <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <img src="./images/proyecto1.jpg" alt=""/>
                  <div class="caption">
                    <h3>Panel de Login</h3>
                    <p>Panel para loguearse en la página de una importante empresa de transporte</p>
                     
		    
		    
		    <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Ver Imagen</a>
 
			<!-- Modal -->
			<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-	labelledby="myModalLabel" aria-hidden="true">
  
                 	  <div class="modal-body">
				<img class="img-panel"  src="./images/proyecto1.jpg" />
    
			  </div>
			<div class="modal-footer">
			    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    
			</div>

  
		     </div>





		    <!--------------------->
	
                  </div>
                </div>
              </li>
              <!--li class="span4">
                <div class="thumbnail">
                  <img src="http://placehold.it/300x200" alt=""/>
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <img src="http://placehold.it/300x200" alt=""/>
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                  </div>
                </div>
              </li-->
            </ul>
          </div> 
    </div>
    <!--Separador-->

    
    <div class="hero-unit" id="contact">  
    <form class="form" action="mailto:contacto@arielpenciaroli.com.ar" method="post" enctype="text/plain">
     <fieldset>
        <legend>Contacto</legend>
        <label >Nombre</label>
	<input type="text" /> 
	<label >E-Mail</label>
        <input type="text" /> 
	<label >Sitio Web</label>
        <input type="text" />
       	<label >Mensaje</label>
        <textarea id="mensaje"></textarea>
	<div style="clear:both"></div> 
	<button type="submit" class="btn">Submit</button>
     </fieldset>
    </form>
    <img class="contacto-imagen"src="./images/contactar.jpg"></img> 
    </div>	
    
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="./js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $("div.container ul.nav li a").bind("click", function(e){
         e.preventDefault(); e.stopPropagation();
         $("ul.nav li").removeClass("active");
         $(this).parent().addClass("active");
         $.scrollTo($(this).attr('href'), 800, {easing:'elasout'} );
        });
		
        });
    </script> 
  </body>
</html>
